<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 800px;
            margin: 10px auto;
        }

        h1 {
            background-color: #4169e1;
            font-size: 18px;
            color: #fff;
            padding: 10px;
        }

        .checkbox-group {
            border-bottom: 1px dashed #000;
            padding-bottom: 20px;
        }

        p {
            padding: 10px 0;
        }

        label {
            margin-right: 20px;
        }

        .list {
            margin-top: 10px;
        }

        .item {
            background-color: #faebd7;
            margin-bottom: 10px;
            padding: 20px 10px;
        }

        .title {
            font-size: 18px;
            font-weight: normal;
        }

        .info {
            color: #333;
        }

        .frontColor {
            color: red;
            font-weight: bold;
        }
    </style>


</head>

<body>
    <div id="app">
        <h1>星座分析器</h1>
        <div class="checkbox-group">
            <p>请选择星座</p>
            <label :class="{frontColor: isShowItem1}">
                <input type="checkbox" v-model="isShowItem1">
                狮子座
            </label>
            <label :class="{frontColor: isShowItem2}">
                <input type="checkbox" v-model="isShowItem2">
                摩羯座
            </label>
            <label :class="{frontColor: isShowItem3}">
                <input type="checkbox" v-model="isShowItem3">
                处女座
            </label>
            <label :class="{frontColor: isShowItem4}">
                <input type="checkbox" v-model="isShowItem4">
                天秤座
            </label>
        </div>

        <div class="list">
            <div class="item" v-if="isShowItem1">
                <h2 class="title">狮子座</h2>
                <p class="info">
                    狮子座通常是一名比较好的组织管理角色，想要驯服这样一名喜欢表现的人，令他们成为忠实勤勉的下属，上司必须有足够使其信服的威信和卓尔不群的能力。一名令狮子座心服口服的主管，不用整天地耳提面命，也会令狮子座无怨无悔的承担起艰巨的工作，哪怕这份工作没有任何的乐趣。
                </p>
            </div>
            <div class="item" v-if="isShowItem2">
                <h2 class="title">摩羯座</h2>
                <p class="info">
                    摩羯座是体现冬天开始的星座，冬天把“实现价值”毫无保留地带给了摩羯座出生的人。他们善于独立实现自己心中的理想。喜欢从容不迫、深思熟虑，待人亲切和蔼、心胸宽广、有抱负，以踏实的方式追求成功，信奉有付出就会有回报的信条。即使遇到挫折也能砥砺前行，顽强的毅力及意志是你迈向成功的不二法门。摩羯座的人，尤其当有几个行星同时处于你的星座时，你将是一个具有现实主义思想和有抱负的人；同时你又容易被热烈的感情征服，是一个有强烈忘我精神的人。
                </p>
            </div>
            <div class="item" v-if="isShowItem3">
                <h2 class="title">处女座</h2>
                <p class="info">天文学中室女座的形象是个长着翅膀的美丽女神。可见其存在的悠久性和重要性。室女座同时也是天使，为人类带来福祉和美好。</p>
            </div>
            <div class="item" v-if="isShowItem4">
                <h2 class="title">天秤座</h2>
                <p class="info">凡事要求公平，也极力反对不公平的事，是天秤座性格最明显的地方。他对于不合理的事，采取激烈的态度，不是愤怒，便是冷漠以对。</p>
            </div>
        </div>


    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const isShowItem1 = ref(false)
                const isShowItem2 = ref(false)
                const isShowItem3 = ref(false)
                const isShowItem4 = ref(false)

                return {
                    isShowItem1,
                    isShowItem2,
                    isShowItem3,
                    isShowItem4
                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>